<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入编码" v-model="queryParam.code"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="发布状态" :label-col="labelCol" :wrapper-col="wrapperCol">
              <z-dict-select-tag popupContainer="parent" dictCode="MB_FLOW_DEPLOY_STATUS"  v-model="queryParam['status@EQ']"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <vxe-grid
        id="FormList"
        ref="vxeTable"
        v-bind="gridOptions"
        :row-config="{keyField:'code'}"
      >
      <template #action="{ row }">
        <a @click="handleEdit(row)">编辑</a>
        <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDesign(row)">设计表单</a>
              </a-menu-item>
              <a-menu-item v-if="row.model">
                <a href="javascript:;" @click="handleDeploy(row)">发布表单</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="handlePreview(row)">预览</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
      </template>
    </vxe-grid>
    </div>
    <FormModal @ok="modalFormOk" ref="modalForm" />
    <FormDesignModal @ok="modalFormOk" ref="formDesignModal" />
    <FormPreviewModal  ref="formPreviewModal" />
  </a-card>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import FormModal from './modules/FormModal'
import FormDesignModal from './modules/FormDesignModal'
import FormPreviewModal from './modules/FormPreviewModal'
import { getAction } from '@/services/manage'
export default {
  name: 'FormList',
  components: { ZDictSelectTag, FormModal, FormDesignModal, FormPreviewModal },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'seq', width: 40 },
        { title: '表单编码', field: 'code' },
        { title: '表单名称', field: 'name' },
        { title: '发布状态', field: 'status', formatter: 'dictText' },
        { title: '描述', field: 'desc' },
        { title: '当前key', field: 'lastDefKey' },
        { title: '当前版本', field: 'lastDefVersion' },
        { title: '创建人', field: 'createBy', formatter: 'dictText' },
        { title: '创建时间', field: 'createTime' },
        { title: '操作', slots: { default: 'action' }, width: 170 }
      ],
      url: {
        list: '/camunda/form/page',
        deploy: '/camunda/form/deploy/'
      }
      // toolbarConfig: {
      //   buttons: [],
      //   import: false
      // }
    }
  },
  methods: {
    handleDeploy(row) {
      getAction(`${this.url.deploy}${row.code}`).then(res => {
        if (res.success) {
          this.$message.success('发布成功')
          this.loadData()
        }
      })
    },
    handleDesign(row) {
      this.$refs.formDesignModal.show(row)
    },
    handlePreview(row) {
      this.$refs.formPreviewModal.show(row)
    }
  }
}
</script>

